/**
 * 处理针对不同的环境获取系统导航栏的高度
 */
import { computed, ref } from 'vue'
import useSystemInfo from '../../../libs/hooks/useSystemInfo'
import { navbarDefaultHeight } from '../../../config'

export default function useSystemNavbarInfo() {

  // 获取系统导航栏信息
  const { customNavbar, systemInfo, updateCustomNavbarInfo, updateSystemInfo } = useSystemInfo()

  // 导航栏高度
  let navbarHeight = ref<number | string>(0)
  // 状态栏高度
  let statusHeight = computed<number>(() => {
    return customNavbar.value?.statusHeight || 0
  })
  // 窗口宽度
  let windowWidth = computed<number>(() => {
    return systemInfo.value?.screenWidth || 0
  })

  // 更新导航栏的高度
  const updateNavbarHeight = (_height: string | number) => {
    if (!!_height) {
      navbarHeight.value = _height
      return
    }
    navbarHeight.value = customNavbar.value?.height || navbarDefaultHeight
  }

  // 根据不同系统和环境获取导航栏高度
  const getCustomNavbarHeight = () => {
    // 判断缓存中的高度信息是否存在，如果不存在则进行获取并写入到缓存中
    if (customNavbar.value?.height === undefined || customNavbar.value?.statusHeight === undefined) {
      updateCustomNavbarInfo()
    }
  }
  const getSystemInfo = () => {
    // 判断缓存中的系统信息是否存在，如果不存在则获取并更新到缓存中
    if (systemInfo.value?.windowWidth === undefined) {
      updateSystemInfo()
    }
  }

  // 胶囊信息
  // 胶囊左边位置（如果存在则整体宽度减这个位置的值）
  let capsuleButtonWidth = ref(0)
  let capsulrButtonTopDiff = ref(0)
  const getCapsuleInfo = () => {
    // 获取胶囊按钮信息
    /* #ifdef MP-WEIXIN || MP-ALIPAY || MP-BAIDU || MP-TOUTIAO || MP-QQ */
    const menuButtonInfo = uni.getMenuButtonBoundingClientRect()
    // console.log(menuButtonInfo);
    capsuleButtonWidth.value = menuButtonInfo.width
    capsulrButtonTopDiff.value = menuButtonInfo.top - statusHeight.value
    /* #endif */
  }

  return {
    navbarHeight,
    statusHeight,
    windowWidth,
    updateNavbarHeight,
    getCustomNavbarHeight,
    getSystemInfo,
    capsuleButtonWidth,
    capsulrButtonTopDiff,
    getCapsuleInfo
  }
}